<template>
  <div>
      <div class="ywt_hidden"></div>
    <van-tabs v-model="active" @click="onClick">
      <van-tab name="全部" title="全部"></van-tab>
      <van-tab name="精华" title="精华"></van-tab>
      <van-tab name="分享" title="分享"></van-tab>
      <van-tab name="问答" title="问答"></van-tab>
      <van-tab name="招聘" title="招聘"></van-tab>
      <van-tab name="客户端测试" title="客户端测试"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
data(){
    return{
    active: "全部",
    }
      
},
methods:{
     onClick(key) {
      //点击切换
      this.active = key;
      localStorage.setItem("active",this.active)
      console.log(key);
      this.showList = [];
      switch (this.active) {
        case "全部":
          this.showList = this.list;
          break;
        case "精华":
          this.list.forEach((ele) => {
            if (ele.tab == "精华") {
              this.showList.push(ele);
            }
          });
          break;
        case "精华":
          this.list.forEach((ele) => {
            if (ele.tab == "精华") {
              this.showList.push(ele);
            }
          });
          break;
        case "分享":
          this.list.forEach((ele) => {
            if (ele.tab == "分享") {
              this.showList.push(ele);
            }
          });
          break;
        case "问答":
          this.list.forEach((ele) => {
            if (ele.tab == "问答") {
              this.showList.push(ele);
            }
          });
          break;
          case "招聘":
          this.list.forEach((ele) => {
            if (ele.tab == "招聘") {
              this.showList.push(ele);
            }
          });
          break;
          case "客户端测试":
          this.list.forEach((ele) => {
            if (ele.tab == "客户端测试") {
              this.showList.push(ele);
            }
          });
          break;
        default: this.showList = this.list;
          break;
      }
    },
}
}
</script>

<style lang="scss" scoped>
.ywt_hidden {
  width: 100%;
  height: 18vh;
}
</style>